<mat-toolbar class="pac-nav-toolbar pac-model__shell-bar flex items-center pl-2" displayDensity="compact">
    <button mat-icon-button displayDensity="cosy" [color]="mt.menuOpen?'accent':''"
        [matMenuTriggerFor]="menu"
        #mt="matMenuTrigger"
        >
        <mat-icon [color]="mt.menuOpen?'accent':''">more_vert</mat-icon>
    </button>
    <nav mat-tab-nav-bar [tabPanel]="tabPanel" color="accent" disableRipple class="flex-1" mat-stretch-tabs="false" mat-align-tabs="start">
      @for (tab of hierarchies(); track tab.__id__; let i = $index) {
        <span mat-tab-link class="relative"
            [routerLink]="['hierarchy', tab.__id__]"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive"
        >
          {{tab.caption}}

          @if (dirty() && isDirty(tab.__id__)) {
            <span class="ping-badge pointer-events-none absolute -left-2 top-2 flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2"></span>
            </span>
          }
            <button mat-icon-button displayDensity="compact" class="pac-nav-tab__close"
                [matMenuTriggerFor]="hMenu"
                [matMenuTriggerData]="{key: tab.__id__}"
                #mt="matMenuTrigger"
                [class.active]="mt.menuOpen"
                >
                <mat-icon>more_vert</mat-icon>
            </button>
        </span>
      }

        <button mat-icon-button [matTooltip]=" 'Copilot.GenerateWithAI' | translate: {Default: 'Generate with AI'} "
          (click)="newHierarchy()">
          <mat-icon fontSet="material-icons-outlined">auto_fix_high</mat-icon>
        </button>
    </nav>

    <div class="flex justify-around items-center">
        <button mat-button displayDensity="cosy" [color]="detailsOpen()?'accent':''"
          [matTooltip]="'PAC.ACTIONS.OpenAttributesPanel' | translate: {Default: 'Open attributes panel'}"
          matTooltipPosition="above"
          (click)="drawer.toggle()"
        >
          <div class="flex justify-start items-center">
            <mat-icon fontSet="material-icons-outlined" [color]="detailsOpen()?'accent':''">edit_attributes</mat-icon>
            @if (!isMobile()) {
              <span >{{ 'PAC.MENU.Attributes' | translate: {Default: "Attributes"} }}</span>
            }    
          </div>
        </button>
    </div>
</mat-toolbar>

<mat-drawer-container class="flex-1" [hasBackdrop]="false" [autosize]="true">
    <mat-drawer #drawer class="ngm-story__designer-drawer mat-elevation-z"
        autosize position="end"
        [mode]="isMobile() ? 'over' : 'side'"
        [(opened)]="detailsOpen"
        ngmResizer [resizerWidth]="380"
    >
        <ngm-settings-panel class="pac-model__settings-container m-2 rounded-lg shadow-lg overflow-hidden"
            liveMode (opened)="detailsOpen.set(true)">
        </ngm-settings-panel>

        <div ngmResizerBar resizerBarPosition="left" style="z-index: 1;"
            cdkDrag
            cdkDragLockAxis="x"
        ></div>
    </mat-drawer>
    <mat-drawer-content>
        <mat-tab-nav-panel #tabPanel class="h-full w-full flex-1 overflow-hidden">
            <router-outlet #o="outlet"></router-outlet>
        </mat-tab-nav-panel>
    </mat-drawer-content>
</mat-drawer-container>

@if (!dimension()) {
  <div class="pac-result absolute top-0 left-0 w-full h-full z-10 flex flex-col justify-center items-center backdrop-blur-md
    bg-white/10 dark:bg-black/5">
    <span class="bug font-notoColorEmoji">🐞</span>
    <span class="description">{{ 'PAC.MODEL.DIMENSION.DimensionNotFound' | translate: {Default: 'Dimension not found!'} }}</span>
  </div>
}

<mat-menu #menu="matMenu" class="ngm-density__compact">
    <button mat-menu-item (click)="editDimension()">
        <mat-icon fontSet="material-icons-round">drive_file_rename_outline</mat-icon>
        <span>{{ 'PAC.KEY_WORDS.DIMENSION' | translate: {Default: "Dimension"} }}</span>
    </button>
</mat-menu>

<mat-menu #hMenu="matMenu" class="ngm-density__compact">
    <ng-template matMenuContent let-key="key">
      <button mat-menu-item (click)="editHierarchy(key)">
        <mat-icon fontSet="material-icons-outlined">drive_file_rename_outline</mat-icon>
        <span>{{ 'PAC.MODEL.DIMENSION.EditAttributes' | translate: {Default: "Edit Attributes"} }}</span>
      </button>

      <button mat-menu-item (click)="duplicateHierarchy(key)">
        <mat-icon fontSet="material-icons-outlined">content_copy</mat-icon>
        <span>{{ 'PAC.ACTIONS.Duplicate' | translate: {Default: "Duplicate"} }}</span>
      </button>
    
      <button mat-menu-item ngmAppearance="danger" (click)="removeHierarchy(key)">
        <mat-icon fontSet="material-icons-round">delete_forever</mat-icon>
        <span>{{ 'PAC.KEY_WORDS.DELETE' | translate: {Default: "Delete"} }}</span>
      </button>
    </ng-template>
</mat-menu>
